<template>
  <div>
    <q-table
      flat
      color="primary"
      class="cross_table"
      separator="cell"
      :columns="columns"
      :data="list"
      row-key="id"
      :rows-per-page-options="[10, 20, 50, 100]"
      :pagination.sync="pagination"
      @request="query"
    >
      <template v-slot:top="table">
          <div class="row no-wrap full-width">
          <q-input
            clearable
            outlined
            dense
            placeholder="请输入关键字搜索"
            class="on-left"
            @input="query"
            debounce="500"
            v-model="key"
          >
            <template #append>
              <q-btn flat round icon="search" color="primary" @click="query" :loading="loading">
                <q-tooltip>搜索</q-tooltip>
              </q-btn>
            </template>
          </q-input>
          <q-space />
          <table-top-btns
              label="字典管理"
              modelName="dict"
              :showAdd="true"
              :showImport="false"
              :showExport="false"
              :showDeleteBatch="false"
              :showGroup="false"
              :table="table"
              :selected="selected"
              :importing="importing"
              :exporting="exporting"
              :importExcelUrlFull="importExcelUrlFull"
              :columns="columns"
              @groupChange="groupChange"
              @add="add"
              @importExcel="importExcel"
              @exportExcel="exportExcel"
              @showConfirm="showConfirm"
            />
        </div>
      </template>
      <template #body-cell-status="props">
        <q-td :props="props">
          <q-badge
            @click.native="changeStatus(props.row)"
            :class="['cursor-pointer',props.value === 1?'bg-blue':'bg-grey']"
          >{{props.row.status === 1?'启用':'停用'}}</q-badge>
        </q-td>
      </template>
      <template #body-cell-opt="props">
        <q-td :props="props" :auto-width="true">
            <cc-btn label="编辑" color="primary" icon="edit" @click="edit(props.row)"> <q-tooltip>编辑</q-tooltip></cc-btn>
          <btn-del label="字典列表" @confirm="del(props.row)" />
        </q-td>
      </template>
    </q-table>
    <cc-dialog ref="dialog" :title="`${editType}字典列表`" @submit="submit">

            <div class="col-12">
              <h5>字典项文本：</h5>
              <q-input outlined dense v-model="form.itemText" type="text" autofocus
                :rules="[requiredTest]" />
            </div>
            <div class="col-12">
              <h5>字典项值：</h5>
              <q-input outlined dense v-model="form.itemValue" type="text"
              :rules="[requiredTest]" />
            </div>
            <div class="col-12">
              <h5>描述：</h5>
              <q-input outlined dense v-model="form.description" type="text" :rules="[]" />
            </div>
            <div class="col-12">
              <h5>排序：</h5>
              <q-input
                outlined
                dense
                v-model="form.sortOrder"
                type="number"
                :rules="[requiredTest]"
              />
            </div>
            <div class="col-12">
              <h5>状态：</h5>
              <q-toggle v-model="form.status" :true-value="1" :false-value="0" />
            </div>
       </cc-dialog>
  </div>
</template>

<script>
import { requiredTest } from 'boot/inputTest';
import { IndexMixin } from 'boot/mixins';

export default {
  name: 'SysDictItem',
  mixins: [IndexMixin],
  props: {
    selectedDictArray: Array,
  },
  data() {
    return {
      columns: [
        {
          name: 'index',
          align: 'center',
          label: '序号',
          field: 'index',
          headerClasses: 'cc-table-index',
        },
        {
          name: 'itemText', align: 'center', label: '字典项文本', field: 'itemText',
        },
        {
          name: 'itemValue', align: 'center', label: '字典项值', field: 'itemValue',
        },
        {
          name: 'sortOrder', align: 'center', label: '排序', field: 'sortOrder',
        },
        {
          name: 'status', align: 'center', label: '状态', field: 'status',
        },
        {
          name: 'opt',
          label: '操作',
          field: 'id',
          align: 'center',
        },
      ],
      url: {
        list: '/sys/dictItem/list',
        add: '/sys/dictItem/add',
        edit: '/sys/dictItem/edit',
        delete: '/sys/dictItem/delete',
        deleteBatch: '/sys/dictItem/deleteBatch',
        changeSysDictItemStatus: '/sys/dictItem/status',
        exportXlsUrl: '/sys/dictItem/exportXls',
        importExcelUrl: '/sys/dictItem/importExcel',
      },
    };
  },
  methods: {
    requiredTest,
    queryParam() {
      const sel = this.selectedDictArray[0];
      return {
        dictId: sel.id,
      };
    },
    beforeQuery() {
      return this.selectedDictArray.length === 1;
    },
    addBefore() {
      if (this.selectedDictArray.length === 1) {
        this.form.dictId = this.selectedDictArray[0].id;
        this.form.sortOrder = 100;
        this.form.status = 1;
        return true;
      }
      this.$warn('请先选择字典');
      return false;
    },
    changeStatus(row) {
      this.$axios.put(this.url.changeSysDictItemStatus, row)
        .then((r) => {
          this.$retMsg(r);
        }).finally(() => {
          this.query();
        });
    },
  },
  watch: {
    selectedDictArray: {
      handler() {
        if (this.selectedDictArray.length === 1) {
          this.key = '';
          this.query();
        } else {
          this.list = [];
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang="stylus"></style>
